<template>
  <div class="OrderStart">
    <Header title="开始计时"></Header>
    <div style="padding:31px 6px 0 6px">
      <div class="Orderinfo" style="padding: 0 12px;margin-top: 12px;background: #fff">
        <div style="display: flex;border-bottom: 1px #F8FAF9 solid;padding:10px 4px">
          <div style="flex:1;text-align: left">店铺名称</div>
          <div class="shopname">
            {{startinfo.shopname}}
          </div>
        </div>
        <div style="border-bottom: 1px #F8FAF9 solid;padding:10px 4px">
          <div style="text-align: left">座位信息</div>
          <div style="padding: 8px 0;display: flex;flex-wrap:wrap">
            <div class="seat_info" v-for="_item in setlist">{{_item.name}}</div>
          </div>
        </div>
        <div style="display: flex;border-bottom: 1px #F8FAF9 solid;padding:10px 4px ">
          <div style="flex: 1;text-align: left">到店时间</div>
          <div style="flex: 1;text-align: right;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
            {{ArriveTime.substring(0,16)}}
          </div>
        </div>
      </div>
      <div style="text-align: center;padding-top: 12px">
        <img src="static/icon/order_btn_time.png" @click="orders" alt="start" style="width:120px">
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import Header from './../Header'
  import {OrderStart} from '../../api/mine'
  import moment from 'moment'

  export default {
    data () {
      return {
        list: [{
          name: '玲玲的心爱1号书店',
          ordertime: '2018-01-01 13:14',
          seattype: ['连排1号', '连排2号', '连排1号', '连排2号', '连排3号', '连排1号', '连排2号', '连排3号']
        }],
        startinfo: {},
        setlist: [],
        ArriveTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    created () {
      this.startinfo = this.$route.query
      this.setlist = JSON.parse(this.$route.query.setlist)
    },
    methods: {
      infinite (done) {
        setTimeout(() => {
          done(true)
        }, 1500)
      },
      orders () {
        let _this=this
        // _this.$router.replace({
        //   name: 'OrderStarting',
        //   query: {
        //     shopname: _this.startinfo.shopname,
        //     time: _this.ArriveTime,
        //     orderid: _this.startinfo.orderId,
        //     setlist: JSON.stringify(_this.setlist)
        //   }
        // })
        // return
        OrderStart({
          orderId: _this.startinfo.orderId,
          qrcode: _this.startinfo.qrcode
        }).then(res => {
          if(res.data.status==='success'){
            _this.$router.replace({
              name: 'OrderStarting',
              query: {
                shopname: _this.startinfo.shopname,
                time: _this.ArriveTime,
                orderid: _this.startinfo.orderId,
                setlist: JSON.stringify(_this.setlist)
              }
            })
          }else{
            Vue.$vux.toast.text(res.data.msg, 'bottom')
          }

        })

      }
    },
    components: {
      Header
    }
  }
</script>

<style lang="less" type="text/less">
  .OrderStart {
    color: @font-color;
    .Orderinfo {
      border-radius: 5px;
      font-size: 15px;
      .shopname {
        flex: 2;
        text-align: right;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: @common-color;
      }
      .seat_info {
        font-size: 12px;
        padding: 4px 14px;
        width: 60px;
        text-align: center;
        margin: 4px;
        border: 1px #F8FAF9 solid;
        border-radius: 3px;
        box-shadow: 0px -2px 0px 0px #F8FAF9,
        -2px 0px 0px 0px #F8FAF9,
        2px 0px 0px 0px #F8FAF9,
        0px 2px 0px 0px #F8FAF9;
      }
    }
  }

</style>
